<template>
  <div>

    <el-dialog
      id="attachment"
      :visible.sync="show"
      width="950px"
      class="closeIcon"
      :title="title"
      :append-to-body="true"
      @close="close"
    >
      <div class="attachment">
        <div class="left">
          <el-input v-model="cateTitle" placeholder="请输入分类名称">
            <el-button
              slot="append"
              type="primary"
              icon="el-icon-search"
              style="border-radius:3px;border:none;"
              @click="serarchCate"
            />
          </el-input>
          <div id="attachmentCate">
            <el-scrollbar>
              <!-- <el-button class="allCate" @click="append">添加分类</el-button> -->
              <el-tree
                ref="tree"
                class="filter-tree"
                :data="treeData"
                :props="defaultProps"
                highlight-current
                :expand-on-click-node="showTree"
                :indent="12"
                node-key="id"
                :current-node-key="currentNode"
                :default-expanded-keys="defaultExpandKeys"
                @node-click="handleNodeClick"
              >
                <template slot-scope="{ node, data }">
                  <div class="flex-row treeSortList">
                    <span class="tooltip-wrap"> {{ node.label }} </span>
                    <div
                      v-if="showBtn[data.id] "
                      class="doBtn"
                    >
                      <el-button
                        v-if="showAdd"
                        type="text"
                        size="mini"
                        title="添加"
                        icon="el-icon-plus"
                        @click.stop="() => append(data)"
                      />
                      <el-button
                        v-if="showEdit "
                        type="text"
                        size="mini"
                        title="编辑"
                        icon="el-icon-edit-outline"
                        @click.stop="() => edit(data, node)"
                      />
                      <el-button
                        v-if="showDele "
                        type="text"
                        size="mini"
                        title="删除"
                        icon="el-icon-delete"
                        @click.stop="() => remove(data,node)"
                      />
                    <!--                                            <el-button type="text" v-if="data.parent_id != 0" size="small" title="菜单权限"-->
                    <!--                                                       @click.stop="() => setMenu(node, data)" icon="el-icon-setting">-->
                    <!--                                            </el-button>-->
                    </div>
                  </div>
                </template>
              </el-tree>
            <!-- {{ treeData }} -->
            <!-- <div style="padding: 0 20px 20px">
                <el-button
                  @click="openDialog(0)"
                  class="el-icon-plus light_blue"
                  style="padding:13px 64px; font-size:14px"
                  >新增部门
                </el-button>
              </div> -->
            </el-scrollbar>
            <!-- {{ currentNode }}{{ defaultNode }}
    <el-button @click="dianji">点击</el-button> -->
            <BouncedDialog
              :title="cate_id == '' ? '增加分类' : '编辑分类'"
              :dialog-show.sync="dialogShow2"
              :width="60"
              :append="true"
              class="dialog_cate"
              @close="closeCate"
            >
              <div style="padding: 0px 20px">
                <el-form ref="form" :model="form" label-width="80px" :rules="formRules">
                  <el-form-item label="上级分类" prop="parent_id">
                    <el-select v-model="form.parent_id">
                      <el-option
                        v-for="item in cateList"
                        :key="item.id"
                        :label="item.title"
                        :value="item.id"
                      />
                    </el-select>
                  </el-form-item>
                  <el-form-item label="分类名称" prop="title">
                    <el-input v-model="form.title" />
                  </el-form-item>
                </el-form>
                <div style="text-align: center" class="dialog-footer">
                  <el-button type="primary" size="larger" @click="submit">确 定</el-button>
                </div>
              </div>
            </BouncedDialog>
          </div>
        </div>
        <div class="right">
          <attachmentList
            v-if="dialogShow"
            ref="attachmentList"
            :attachment-cate="cate_id"
            :attachment-type="attachmentType"
            @func="getData"
          />
        </div>
      </div>

    </el-dialog>

  </div>
</template>

<script>
import attachmentApi from '@/api/system/attachment'
import Attachment from '@/views/system/attachment.vue'
import attachmentList from './attachment.vue'
export default {
  components: { attachmentList },
  props: {
    title: {
      type: String,
      default: '选择附件'
    },
    dialogShow: {
      type: Boolean,
      default: false
    },
    attachmentType: {
      default: 2
    }
  },
  data() {
    return {
      show: false,
      currentNode: 0,
      defaultExpandKeys: [],
      dialogShow2: false,
      form: {
        parent_id: '',
        title: ''
      },
      formRules: {
        parent_id: [
          { required: true, message: '请选择上级分类', trigger: 'change' }
        ],
        title: [
          { required: true, message: '请输入分类名称', trigger: 'blur' }
        ]
      },
      cate_id: '',
      cateList: [],
      treeData: [],
      // data: JSON.parse(JSON.stringify(data)),
      defaultProps: {
        children: 'children',
        label: 'title'
      },
      showTree: false, // 是否点击节点展开树，false 只能点前面三角图标展开
      showAdd: false,
      showBtn: [],
      showEdit: false,
      showDele: false,
      cateTitle: '',
      is_used: false
    }
  },
  watch: {
    treeData(val, value) {

    },
    dialogShow: function(val, value) {
      this.show = val
      this.dialogShow = val
      if (this.show) {
        // this.getCateList()
      }
    }
    // attachmentType(val, value) {
    //   this.attachmentType = val
    //   console.log(val, value, '附件类型')
    //   this.getCateList()
    // }
  },
  created() {
    localStorage.setItem('is_used', '')
  },
  mounted() {
    this.cate_id = 0
    this.currentNode = 0
  },
  updated() {
    const isUsed = localStorage.getItem('is_used')
    if (!isUsed) {
      localStorage.setItem('is_used', 1)
      this.cate_id = 0
      this.currentNode = 0
      this.showBtn = []
      this.showEdit = false
      this.showDele = false
      this.$set(this.showBtn, 0, true)
      this.showAdd = true
      this.getCateList()
    }
  },
  methods: {
    serarchCate() {
      this.getCateList(this.cateTitle)
    },
    // 附件类别
    close() {
      this.$emit('update:dialogShow', this.show)
      localStorage.setItem('is_used', '')
    },
    getCateList(val) {
      var that = this
      attachmentApi.cateList({ title: val == 0 ? '' : val }).then(res => {
        if (res.code == 0) {
          // 重新打开时 初始化到全部分类下
          // console.log(val, '===============')
          if (val == 0) {
            this.currentNode = 0
            this.$set(this.showBtn, val, true)
            this.showAdd = true
            this.cate_id = val
          }
          that.treeData = res.data
          this.cateList = JSON.parse(JSON.stringify(res.data))
          this.cateList[0].title = '一级分类'
          this.defaultExpandKeys = [this.currentNode]
          this.$nextTick(() => {
            // console.log(this.currentNode, '-----------')
            // this.$refs.tree.setCurrentKey(this.currentNode)
            // this.$refs.attachmentList.getAttachmentList(this.cate_id)
          })
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    // 点击分类
    handleNodeClick(data) {
      this.currentNode = data.id
      this.cate_id = data.id
      // 调用父组件的方法请求附件列表
      // this.$emit('update', data.id)
      this.$refs.attachmentList.getAttachmentList(data.id)
      // 判断是否显示新增用户按钮
      if (data.parent_id == 0) {
        this.showAdd = true
      } else {
        this.showAdd = false
      }
      // 展示增删改icon
      if (data.id == 0) {
        this.showEdit = false
        this.showDele = false
      } else {
        this.showEdit = true
        this.showDele = true
      }
      this.showBtn = []
      this.$set(this.showBtn, data.id, true)
    },
    // 新增分类
    append(data) {
      this.dialogShow2 = true
      this.cate_id = ''
      this.form.parent_id = data.id
      this.form.title = ''
    },
    // 编辑分类
    edit(data) {
      // console.log(data, '------------------')
      this.dialogShow2 = true
      this.form.parent_id = data.parent_id
      this.form.title = data.title
      this.cate_id = data.id
    },
    // 关闭分类
    closeCate() {
      this.dialogShow2 = false
    },
    // 删除分类
    remove(data) {
      // console.log(data)
      // return
      this.$confirm('此操作将永久删除该分类, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          attachmentApi.cateDelete({ id: [data.id] }).then(res => {
            if (res.code == 0) {
              this.$message.success(res.msg)
              this.getCateList()
            } else {
              this.$message.error(res.msg)
            }
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 提交编辑、新增分类
    submit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (!this.cate_id) {
            attachmentApi.cateSave({ ...this.form }).then(res => {
              if (res.code == 0) {
                this.dialogShow = false
                this.$message.success(res.msg)
                this.getCateList()
              } else {
                this.$message.error(res.msg)
              }
            })
          } else {
            const val = this.form
            val.id = this.cate_id
            attachmentApi.cateUpdate(val).then(res => {
              if (res.code == 0) {
                this.dialogShow = false
                this.$message.success(res.msg)
                this.getCateList()
              } else {
                this.$message.error(res.msg)
              }
            })
          }
        } else {
          this.$message.error('请填写必要信息')
        }
      })
    },
    // 往父组件传值
    getData(val) {
      this.$emit('func', val)
      // console.log(val)
    }
  }
}
</script>
<style lang='scss'>
.dialog_cate{
  .el-select{
    width: 100%;
  }
  .el-button--primary{
    background-color:#f84311;
    border-color: #f84311;
    border-radius: 30px;
  }
  .el-button--primary:hover,.el-button--primary:focus{
    background-color:#f84311;
    border-color: #f84311;
  }
}

#attachmentCate{
  height: 400px;
  .allCate{
    height: 30px;

  }
  .el-scrollbar{
    height: 100%;

  }
  .el-scrollbar__thumb{
    width: 0;
  }
  .el-scrollbar__wrap{
    overflow-x: hidden ;
  }
  // 添加部门时设置菜单
  .el-tree.form-tree {
    padding: 10px 20px;
  }

  .el-tree {
    padding: 20px 0 ;
    font-size: 14px;
  }

  .treelistCont {
    width: 500px;
  }

  /* 高亮显示选中 */
  .el-tree--highlight-current
    .el-tree-node.is-current
    > .el-tree-node__content {
    color: #2b5fd6;
    background-color: #eff5ff;
    border-radius: 6px;
    .el-tree-node__expand-icon {
      color: #1465ff;
    }
    .el-tree-node__expand-icon.is-leaf {
      color: transparent;
    }
  }

  .el-tree-node__content {
    height: 44px;
    line-height: 20px;
  }

  .el-tree-node__content .el-input {
    width: auto;
    min-width: 60px;
  }

  .treeSortList {
    width: calc(100% - 28px);
    align-items: center;
    justify-content: space-between;
    position: relative;
    display: flex;
    .tooltip-wrap{
      width: calc(100% - 68px);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  .treeSortList .doBtn {
    width: 62px;
    z-index: 999;
    text-align: right;
    .el-button--mini{
      padding: 0;
    }
  }

  .treeSortList .doBtn .el-button--text {
    color: #2b5fd6;
  }

  .treeSortList .doBtn .el-button--text i {
    color: #fff;
  }

  .treeSortList .doBtn .el-button--text i.el-icon-delete {
    color: #f77501;
  }

  .treeSortList .doBtn .el-button--text i.el-icon-plus {
    color: #2b5fd6;
  }

  .treeSortList .doBtn .el-button--text i.el-icon-edit-outline {
    color: #2b5fd6;
  }

  .treeSortList .doBtn .el-button--text i.el-icon-setting {
    color: #2b5fd6;
  }
}
</style>
<style scoped lang='scss'>
.attachment{
    display: flex;
    .el-pagination{
      margin-top: 10px;
      margin-bottom: 0 !important;
    }
    .left{
      width: 225px;
      // background-color: #ff0;
      margin-right: 10px;
    }
    .right{
      width: calc(100% - 220px);
      border-left: solid 1px #ddd;
      padding-left: 10px;
      .attachment_upload{
        display: inline;
        margin-right: 10px;
      }
      .attachment_box{
      margin-top: 20px;
      height: 400px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-content:flex-start;
      .attachment_item.seat{
        height: 0;
      }
      .attachment_item{
        width: 16%;
        // margin-bottom: 10px;
        .active.el-image, .active#video{
          border: solid 2px #f84311;
        }
        .el-image{
          width: 100%;
          height: 100px;
          cursor: pointer;
        }
        #video{
           width: 100%;
          height: 100px;
          cursor: pointer;
          background-color: rgba(0,0,0,0.2);
          text-align: center;
          .el-icon-video-camera, .el-icon-bell, .el-icon-tickets{
            line-height: 100px;
            font-size: 25px;
          }
        }
        p{
          display: block;
          width: 100%;
          height: 35px;
          line-height: 35px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
    }

}
</style>
